const infoBtns = document.querySelectorAll('.info-dot');
// Найдем все блоки с подсказками
const infoHints = document.querySelectorAll('.info-hint');

// Объявляем функцию которая будет показывать всплывающие подсказки
function showHint(e) {
  // console.log(this);  // Получаем элемент, по которому был клик
  // console.log(this.parentNode);  // Находим родителя элемента, по которому был клик

  // Останавливаем всплытие события на клик, иначе сработает клик на родительском элементе
  e.stopPropagation();

  // Обходим все кнопки и скрываем все подсказки
  for (let hint of infoHints) {
    hint.classList.add('none');
  }

  let infoHint = this.parentNode.querySelector('.info-hint'); // Находим в родителе элемента по которому кликнули, элемент с классом info-hint

  infoHint.classList.remove('none');  // У кнопки по которой кликнули удаляем дополнительный класс none.

  // Можно сделать и так
  // if (infoHint.classList.contains('none')) {
  //   infoHint.classList.remove('none');
  // } else {
  //   infoHint.classList.add('none');
  // }
}

// Объявляем функцию которая закрывает все подсказки
function closeHints() {
  for (let hint of infoHints) {
    hint.classList.add('none');
  }
}

// Можно так
// Закрываем подсказки по кликам по всему документу
// document.addEventListener('click', function (e) {
//   if (e.target.parentNode.classList.contains('info-dot'))
//     return;

//   let infoHints = document.querySelectorAll('.info-hint');
//   for (let hint of infoHints) {
//     hint.classList.add('none');
//   }
// });

// На каждую кнопку навешиваем обработчик события клик (показать всплывающую подсказку)
for (let btn of infoBtns) {
  btn.addEventListener('click', showHint)
};

// На весь документ навешиваем обработчик события клик (закрыть все всплывающие подсказки)
document.addEventListener('click', closeHints);

// Запрещаем всплытие события клика при клике на кружочках подсказки (иначе подсказка закроется, т.к. на документе навешивается обработчик события клика)
for (let hint of infoHints) {
  hint.addEventListener('click', (e) => e.stopPropagation());
}

// swiper slider
const swiper = new Swiper('.swiper', {
  // Optional parameters
  // direction: 'horizontal', можно не писать он по умолчанию горизонтальный
  loop: true,

  slidesPerView: 1, // Изначально устанавливаем 1 слайд
  spaceBetween: 42,
  freeMode: true, // чтобы слайды двигались плавно

  // Адаптив слайдера
  breakpoints: {
    600: {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    920: {
      slidesPerView: 3,
      spaceBetween: 20,
    },
    1230: {
      slidesPerView: 4,
      spaceBetween: 42,
    },
  },

  // Navigation arrows
  navigation: {
    nextEl: '#sliderNext',
    prevEl: '#sliderPrev',
  },
});

// Tabs
const tabsBtns = document.querySelectorAll('[data-tab]');
// находим все товары, которые имеют атрибут data-tab-value 
const tabsProducts = document.querySelectorAll('[data-tab-value]');


for (let btn of tabsBtns) {
  btn.addEventListener('click', function (e) {

    for (let btn of tabsBtns) {
      btn.classList.remove('tab-controls__btn--active');
    }
    this.classList.add('tab-controls__btn--active');

    // Если кликнули по кнопке "Все товары"
    if (btn.dataset.tab === 'all') {
      // Перебираем все товары и удаляем у них класс класс "none", чтобы они все были видимыми
      for (let product of tabsProducts) {
        product.classList.remove('none');
      }
      // Иначе, если кликнули по другой кнопке
    } else {
      // Перебираем все товары
      for (let product of tabsProducts) {
        // Если значение атрибута товара "data-tab-value" не соответствует значению атрибута data-tab того таба по которому кликнули, то добавляем ему класс "none", чтобы скрыть товар
        if (product.dataset.tabValue !== btn.dataset.tab) {
          product.classList.add('none');
          // Иначе удаляем у него класс "none", чтобы сделать товар видимым
        } else {
          product.classList.remove('none');
        }
      }
    }
    swiper.updateSlides(); // Пересчитать количество слайдов и их смещения
    swiper.updateSize(); // Пересчитать размер контейнера слайдера
    // Обновление swiper после изменения количества слайдов в нем
    swiper.update();
  })
};

// Mobail nav
const mobailNavOpenBtn = document.querySelector('#open-mobail-nav-btn');
const mobailNavClose = document.querySelector('#close-mobail-nav-btn');
const mobailNav = document.querySelector('#mobail-nav');

mobailNavOpenBtn.addEventListener('click', () => {
  mobailNav.classList.add('mobail-nav-wrapper--open');
});

mobailNavClose.addEventListener('click', () => {
  mobailNav.classList.remove('mobail-nav-wrapper--open');
})


